<template>

  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">
        <ContentBox :title="'搜索框'" :border="3" :marginHeight="192">
          <template #center>
            <slot name="center">

              <TableSearch class="searchbox" :resetClearInitVale="true" :listForm="listForm.list"
                           @searchHandler='searchHandler' @resetHandler="resetHandler">
                <template #xxx="slotProps">
                  <el-row>
                    <el-radio-group v-model:value="slotProps.row.xxx">
                      <el-radio-button value="01" label="玩耍"></el-radio-button>
                      <el-radio-button value="02" label="摸鱼"></el-radio-button>
                      <el-radio-button value="03" label="抓虾"></el-radio-button>
                    </el-radio-group>
                  </el-row>
                </template>

                <!--                <template #dec="slotProps">-->
                <!--                  <el-input v-model:value="slotProps.row.dec" placeholder="Basic usage"/>-->
                <!--                </template>-->
              </TableSearch>

            </slot>
          </template>
        </ContentBox>
      </slot>
    </template>
  </DetailBox>
</template>
<script setup lang="ts">
import {reactive} from 'vue';
import TableSearch from '@/views/components/table/tableSearch/index.vue';
import ContentBox from "@/views/components/ContentBox.vue";
import DetailBox from "@/views/components/DetailBox.vue";
import {getRouteTitle} from "@/utils";

// 定义表单项的类型
interface FormItemType {
  label: string;
  type: string;
  keyName: string;
  placeholder?: string;
  slotName?: boolean;
  default?: string | number; // 默认值的类型可能包括字符串或数字
  options?: Array<{ value: string | number; label: string }>; // 下拉选项的类型
}

// 定义搜索服务对象的类型
interface SearchGiveServeType {
  adress: string;
  backTimeArr: string; // 假设这是一个字符串格式的日期范围
  className: string;
  jieduan: string;
  myTime: string; // 假设这是一个字符串格式的日期
  name: string;
}

// 定义整个表单的状态类型
interface ListFormType {
  list: Array<FormItemType>;
  searchGiveServe: SearchGiveServeType;
}

// 初始化表单状态
const listForm: ListFormType = reactive({
  list: [
    {
      label: '姓名',
      type: 'el-input',
      keyName: 'name',
      placeholder: '请输入',
      slotName: true
    },
    {
      label: 'xxx',
      keyName: 'xxx',
      slotName: true
    },
    {
      label: '班级',
      type: 'el-select',
      default: '01', // 回填的值
      placeholder: '请选择',
      keyName: 'className',
      options: [
        {value: '01', label: '初中一班'},
        {value: '02', label: '初中二班'},
        {value: '03', label: '初中三班'}
      ]
    },
    {
      label: '阶段',
      type: 'el-select',
      placeholder: '请选择',
      keyName: 'jieduan',
      options: [
        {value: '01', label: '小学'},
        {value: '02', label: '高中'},
        {value: '03', label: '大学'}
      ]
    },
    {
      label: '时间',
      type: 'el-date-picker',
      keyName: 'myTime',
    },
    {
      label: '归还时间',
      type: 'el-range-picker',
      keyName: 'backTimeArr',
    },
    {
      label: '地址',
      default: '成都',
      type: 'el-input',
      keyName: 'adress',
      placeholder: '请输入',
    },
  ],
  // 后端需要的字段
  searchGiveServe: {
    adress: "成都",
    backTimeArr: "",
    className: "01",
    jieduan: "",
    myTime: "",
    name: "",
  }
});

// 重置
const resetHandler = (backMess: SearchGiveServeType) => {
  // listForm.searchGiveServe = backMess;
  console.log('重置', backMess);
};

// 搜索
const searchHandler = (searchBack: SearchGiveServeType) => {
  // listForm.searchGiveServe = searchBack;
  console.log(searchBack)
  console.log('搜索', searchBack);
};

// 如何在初始的时候拿到值呢？初始值需要自己手动设置
console.log('获取表单的初始值', listForm.searchGiveServe)

</script>
